import plc from "../config/plcLocation";
import { mapState } from "vuex";
import anime from "animejs";
export default {
  data() {
    return {
      timer: null,
      lineIndex: 0,
      lineIndex2: 0,
      lineIndex3: 0,
      useQuenue: [],
      useQuenue2: [],
      useQuenue3: [],
      timer: null,
      endGlass: [],
      endGlass2: [],
      endGlass3: [],
    };
  },
  methods: {
    amimeGlass5(className, index, translateX) {
      this.$nextTick(() => {
        anime({
          targets: className,
          keyframes: [
            {
              background: "#23a8f2",
              translateX: translateX + index * 28,
              duration: 2000,
            },
          ],
          easing: "linear",
          loop: false,
        });
      });
    },
  },
  computed: {
    ...mapState({
      beforeGlass: (state) => {
        const filterData = state.Glass.glass.map((item) => {
          return {
            ...item,
            place: item.place,
          };
        });

        return filterData;
      },
    }),
    A1() {
      return this.beforeGlass.filter((item) => plc.A1.includes(item.place));
    },
    B1() {
      return this.beforeGlass.filter((item) => plc.B1.includes(item.place));
    },
    C1() {
      return this.beforeGlass.filter((item) => plc.C1.includes(item.place));
    },
    A2() {
      return this.beforeGlass.filter((item) => plc.A2.includes(item.place));
    },
    B2() {
      return this.beforeGlass.filter((item) => plc.B2.includes(item.place));
    },
    C2() {
      return this.beforeGlass.filter((item) => plc.C2.includes(item.place));
    },
    T1() {
      return this.beforeGlass.filter((item) => plc.T1.includes(item.place));
    },
    T2() {
      return this.beforeGlass.filter((item) => plc.T2.includes(item.place));
    },
    afterCatGlass1() {
      return this.beforeGlass
        .filter((item) => plc.afterCatGlass1.includes(item.place * 1))
        .sort((a, b) => a.orderid - b.orderid);
    },
    afterCatGlass2() {
      return this.beforeGlass
        .filter((item) => plc.afterCatGlass2.includes(item.place * 1))
        .sort((a, b) => a.orderid - b.orderid);
    },
    beforeCatGlass1() {
      return this.beforeGlass.filter((item) =>
        plc.beforeCatGlass1.includes(item.place * 1)
      );
    },
    beforeCatGlass2() {
      return this.beforeGlass.filter((item) =>
        plc.beforeCatGlass2.includes(item.place * 1)
      );
    },
    innerCatGlass() {
      return this.beforeGlass
        .filter((item) => plc.innerGlass.includes(item.place * 1))
        .sort((a, b) => a.orderid - b.orderid);
    },
    A271() {
      return this.beforeGlass.filter((item) =>
        plc.A271.includes(item.place * 1)
      );
    },
    A251() {
      return this.beforeGlass.filter(
        (item) => plc.A251.includes(item.place * 1) && item.lineIndex * 1 == 2
      );
    },
    A25() {
      return this.beforeGlass.filter((item) =>
        plc.A25.includes(item.place * 1)
      );
    },
    A232() {
      return this.beforeGlass.filter((item) =>
        plc.A232.includes(item.place * 1)
      );
    },
    A301() {
      return this.beforeGlass.filter((item) => item.place * 1 == 1212);
    },
    A31() {
      return this.beforeGlass.filter((item) =>
        plc.A31.includes(item.place * 1)
      );
    },
    A33() {
      return this.beforeGlass.filter((item) =>
        plc.A33.includes(item.place * 1)
      );
    },
    A272() {
      return this.beforeGlass.filter((item) =>
        plc.A272.includes(item.place * 1)
      );
    },
    A233() {
      return this.beforeGlass.filter((item) =>
        plc.A233.includes(item.place * 1)
      );
    },
    A28() {
      return this.beforeGlass.filter((item) =>
        plc.A28.includes(item.place * 1)
      );
    },
    A30() {
      return this.beforeGlass.filter((item) =>
        plc.A30.includes(item.place * 1)
      );
    },
    A29() {
      return this.beforeGlass.filter((item) =>
        plc.A29.includes(item.place * 1)
      );
    },
    A32() {
      return this.beforeGlass.filter((item) =>
        plc.A32.includes(item.place * 1)
      );
    },
    A35() {
      return this.beforeGlass.filter((item) => plc.A35.includes(item.place));
    },
    A36() {
      return this.beforeGlass.filter((item) => plc.A36.includes(item.place));
    },
    A37() {
      return this.beforeGlass.filter((item) => plc.A37.includes(item.place));
    },
    A38() {
      return this.beforeGlass.filter((item) => plc.A38.includes(item.place));
    },
    A39() {
      return this.beforeGlass.filter((item) => plc.A39.includes(item.place));
    },
    A351() {
      return this.beforeGlass.filter((item) => plc.A351.includes(item.place));
    },
    A361() {
      return this.beforeGlass.filter((item) => plc.A361.includes(item.place));
    },
    A401() {
      return this.beforeGlass.filter((item) => plc.A401.includes(item.place));
    },
    A44() {
      return this.beforeGlass.filter((item) => plc.A44.includes(item.place));
    },
    A441() {
      return this.beforeGlass.filter((item) => plc.A441.includes(item.place));
    },
    A442() {
      return this.beforeGlass.filter((item) => plc.A442.includes(item.place));
    },
    A443() {
      return this.beforeGlass.filter((item) => plc.A443.includes(item.place));
    },
    waitGlassRecumentLine() {
      return this.beforeGlass.filter((item) => {
        return plc.waitGlassRecumentLine.includes(item.place * 1);
      });
    },
    waitGlassRecumentLine2() {
      return this.beforeGlass.filter((item) => {
        return plc.waitGlassRecumentLine2.includes(item.place * 1);
      });
    },
    waitGlassRecumentLine3() {
      return this.beforeGlass.filter((item) => {
        return plc.waitGlassRecumentLine3.includes(item.place * 1);
      });
    },
    recumetGlass() {
      return this.beforeGlass.filter((item) => {
        return plc.recumetGlass.includes(item.place * 1);
      });
    },
    recumetGlass2() {
      return this.beforeGlass.filter((item) => {
        return plc.recumetGlass2.includes(item.place * 1);
      });
    },
    recumetGlass3() {
      return this.beforeGlass.filter((item) => {
        return plc.recumetGlass3.includes(item.place * 1);
      });
    },
    glassListA12() {
      return this.beforeGlass
        .filter((item) => {
          return plc.glassListA12.includes(item.place * 1);
        })
        .reverse();
    },
    glassListB12() {
      return this.beforeGlass
        .filter((item) => {
          return plc.glassListB12.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
    glassListC12() {
      return this.beforeGlass
        .filter((item) => {
          return plc.glassListC12.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
    glassListD12() {
      return this.beforeGlass
        .filter((item) => item.lineIndex * 1 == 1)
        .filter((item) => {
          return plc.glassListD12.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
    glassListA22() {
      return this.beforeGlass
        .filter((item) => {
          return plc.glassListA22.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
    glassListB22() {
      return this.beforeGlass
        .filter((item) => {
          return plc.glassListB22.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
    glassListC22() {
      return this.beforeGlass
        .filter((item) => {
          return plc.glassListC22.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
    glassListD22() {
      return this.beforeGlass
        .filter((item) => {
          return plc.glassListD22.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
    glassListA32() {
      return this.beforeGlass
        .filter((item) => {
          return plc.glassListA32.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
    glassListB32() {
      return this.beforeGlass
        .filter((item) => {
          return plc.glassListB32.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
    glassListC32() {
      return this.beforeGlass
        .filter((item) => {
          return plc.glassListC32.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
    glassListD32() {
      return this.beforeGlass
        .filter((item) => {
          return plc.glassListD32.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
    glassListA42() {
      return this.beforeGlass
        .filter((item) => {
          return plc.glassListA42.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
    glassListB42() {
      return this.beforeGlass
        .filter((item) => {
          return plc.glassListB42.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
    glassListC42() {
      return this.beforeGlass
        .filter((item) => {
          return plc.glassListC42.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
    glassListD42() {
      return this.beforeGlass
        .filter((item) => item.lineIndex * 1 == 4 || item.lineIndex * 1 == 5)
        .filter((item) => {
          return plc.glassListD42.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
    glassListA52() {
      return this.beforeGlass
        .filter((item) => item.lineIndex * 1 == 5)
        .filter((item) => {
          return plc.glassListA52.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
    glassListB52() {
      return this.beforeGlass
        .filter((item) => item.lineIndex * 1 == 5)
        .filter((item) => {
          return plc.glassListB52.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
    glassListC52() {
      return this.beforeGlass
        .filter((item) => item.lineIndex * 1 == 5)
        .filter((item) => {
          return plc.glassListC52.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
    glassListD52() {
      return this.beforeGlass
        .filter((item) => item.lineIndex * 1 == 5)
        .filter((item) => {
          return plc.glassListD52.includes(item.place * 1);
        })
        .sort((a, b) => a.orderId - b.orderId);
    },
  },
  watch: {
    waitGlassRecumentLine: {
      handler(newvlaue, oldValue) {
        let arr = newvlaue.filter((item) => {
          return this.endGlass.includes(item.id);
        });
        arr.reverse().forEach((item, index) => {
          let className = ".A" + item.id;
          this.amimeGlass5(className, index, -130);
        });
        this.lineIndex = 0;
        this.$nextTick(() => {
          newvlaue.reverse().forEach((item, i) => {
            let that = this;
            if (this.useQuenue.includes(item.id)) return;
            this.useQuenue.push(item.id);
            that.lineIndex += 1;
            anime({
              targets: ".A" + item.id,
              keyframes: [
                {
                  background: "#23a8f2",
                  translateX: 0,
                  translateY: 0,
                  duration: 1,
                },
                {
                  translateX: -130 + i * 28,
                  duration: 2000,
                },
              ],
              easing: "linear",
              loop: false,
              delay: (that.lineIndex - 1) * 2200,
              begin: () => {},
              complete: () => {
                that.endGlass.push(item.id);
              },
            });
          });
        });
      },
      deep: true,
      immediate: true,
    },
    waitGlassRecumentLine2: {
      handler(newvlaue, oldValue) {
        let arr = newvlaue.filter((item) => {
          return this.endGlass2.includes(item.id);
        });
        arr.reverse().forEach((item, index) => {
          let className = ".A" + item.id;
          this.amimeGlass5(className, index, -130);
        });
        this.lineIndex2 = 0;
        this.$nextTick(() => {
          newvlaue.reverse().forEach((item, i) => {
            let that = this;
            if (this.useQuenue2.includes(item.id)) return;
            this.useQuenue2.push(item.id);
            that.lineIndex2 += 1;
            anime({
              targets: ".A" + item.id,
              keyframes: [
                {
                  background: "#23a8f2",
                  translateX: 0,
                  translateY: 0,
                  duration: 1,
                },
                {
                  translateX: -130 + i * 28,
                  duration: 2000,
                },
              ],
              easing: "linear",
              loop: false,
              delay: (that.lineIndex2 - 1) * 2200,
              begin: () => {},
              complete: () => {
                that.endGlass2.push(item.id);
              },
            });
          });
        });
      },
      deep: true,
      immediate: true,
    },
    waitGlassRecumentLine3: {
      handler(newvlaue, oldValue) {
        let arr = newvlaue.filter((item) => {
          return this.endGlass3.includes(item.id);
        });
        arr.reverse().forEach((item, index) => {
          let className = ".A" + item.id;
          this.amimeGlass5(className, index);
        });
        this.lineIndex3 = 0;
        this.$nextTick(() => {
          newvlaue.reverse().forEach((item, i) => {
            let that = this;
            if (this.useQuenue3.includes(item.id)) return;
            this.useQuenue3.push(item.id);
            that.lineIndex3 += 1;
            anime({
              targets: ".A" + item.id,
              keyframes: [
                {
                  background: "#23a8f2",
                  translateX: 0,
                  translateY: 0,
                  duration: 1,
                },
                {
                  translateX: -80 + i * 28,
                  duration: 2000,
                },
              ],
              easing: "linear",
              loop: false,
              delay: (that.lineIndex3 - 1) * 2200,
              begin: () => {},
              complete: () => {
                that.endGlass3.push(item.id);
              },
            });
          });
        });
      },
      deep: true,
      immediate: true,
    },
  },
};
